<template>
  <movable-area class="c-seat-container">
    <movable-view
      style="width: 100%;"
      :x="seat_x"
      :out-of-bounds="true"
      :inertia="true"
      :scale="true"
      :scale-min="0.95"
      :scale-max="3"
      :friction="20"
      :damping="200"
      direction="all"
      :scale-value="seat_scale_val"
      @scale="onScale"
      @change="onMove"
    >
      <view class="screen-box">
        <image class="screen" src="../../assets/image/screen.svg"></image>
        <text class="hall-name">3号厅</text>
      </view>
      <view class="seat-box">
        <view class="seat-item-cloumn" v-for="(r, i) in rowNo" :key="i">
          <view
            @click="toggleSeat"
            :data-seat="seatColumn"
            class="seat-item"
            :class="[checked_seats.includes(seatColumn?.id) ? 'seat-checked' : 'seat-empty', 'seat-lock', 'seat-dis', ''][seatColumn ? seatColumn.status : 3]"
            :style="{ width: `${260 / columnNo}px`, height: `${260 / columnNo}px` }"
            v-for="(seatColumn, j) in seats[i]"
            :key="j"
          ></view>
        </view>
      </view>
    </movable-view>
    <movable-view style="width:0" :x="10" :y="letter_y" :scale="true" :scale-value="letter_scale_val" :scale-min="0.95" :scale-max="3" direction="vertical">
      <view class="seat-num-line">
        <view class="seat-num" :style="{ width: `${260 / columnNo}px`, height: `${260 / columnNo}px` }" v-for="letter in letters" :key="letter">{{ letter }}</view>
      </view>
    </movable-view>
  </movable-area>
</template>

<script setup>
import { computed, defineProps, ref } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default() {
      return []
    }
  },
  columnNo: {
    type: Number,
    default: 0
  },
  rowNo: {
    type: Number,
    default: 0
  }
})

const letters = ref([])
const seats = computed(() => {
  const seatRow = []
  seatRow.length = props.rowNo
  letters.value.length = props.rowNo
  for (let i = 0; i < props.rowNo; i++) {
    const seatColumn = []
    seatColumn.length = props.columnNo
    seatRow[i] = seatColumn
  }
  props.list.forEach(s => {
    const { r, c, no, id, status } = s
    seatRow[r - 1][c - 1] = { no, id, status }
    letters.value[r - 1] = no[0]
  })
  return seatRow
})

const letter_scale_val = ref(0)
const letter_y = ref(0)
const onScale = e => {
  const { y, scale } = e.detail
  letter_y.value = y
  letter_scale_val.value = scale
}
const onMove = e => {
  const { x, y } = e.detail
  letter_y.value = y
}

const seat_x = ref(0)
const seat_y = ref(0)
const seat_scale_val = ref(1)
const checked_seats = ref([])
const toggleSeat = e => {
  const { dataset, x, y } = e.target
  const { id } = dataset.seat
  const index = checked_seats.value.findIndex(sid => sid == id)
  if (index > -1) checked_seats.value.splice(index, 1)
  else checked_seats.value.push(id)
  if (letter_scale_val.value < 2) {
    seat_x.value = x * -1
    seat_scale_val.value = 2
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.c-seat-container {
  position: relative;
  width: 100%;
  // height: 300px;
  .seat-num-line {
    position: fixed;
    left: 0;
    top: 48px;
    display: flex;
    flex-direction: column;
    font-size: 8px;
    border-radius: 16px;
    color: white;
    background: #00000080;
    text-align: center;
    box-sizing: border-box;
    .seat-num {
      margin: 2px;
      box-sizing: border-box;
    }
  }
  .screen-box {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .screen {
      width: 320px;
      height: 26px;
    }
    .hall-name {
      font-size: 10px;
      color: $text-color;
    }
  }

  .seat-box {
    .seat-item-cloumn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .seat-item {
        content: ' ';
        margin: 2px;
        box-sizing: border-box;
        border-radius: 3px;
      }
      .seat-checked {
        background: $primary-color;
      }
      .seat-empty {
        background: #fff;
      }
      .seat-lock {
        background: #faab23;
      }
      .seat-dis {
        background: #eee;
      }
    }
  }
}
</style>
